<template>
  <!-- <div class="container" style="width: 100%; height: 100%;"> -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="active">公告列表</span>
    </div>

    <el-row>
      <el-col :span="4">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="楼栋">
            <el-select v-model="form.region" placeholder="请选择小区">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="电话">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="房间号">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="5">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="居民类型">
            <el-select v-model="form.region">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="3">
        <el-button type="primary">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary">添加</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="success">批量审核</el-button>
    </el-row>
    <!-- 表格 -->
    <BaseTable :tableColumn="tableColumn" :tableData="tableData" :loading="loading" :isShowSelection="true"
      @edit="handleClick" @delete="handleDelete"></BaseTable>
    <!-- 分页 -->
    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="query.page" :page-sizes="[5, 10, 20, 50]" :page-size="query.psize"
      layout="total, sizes, prev, pager, next, jumper" :total="counts">
    </el-pagination>
  </el-card>
</template>

<script>
import { list, del } from '../api/userinfo'
import BaseTable from './BaseTable.vue';
export default {
  name: 'UserinfoView',
  components: {
    BaseTable
  },
  data() {
    return {
      loading: true,
      tableColumn: [
        {
          prop: "id",
          label: "ID",
        },
        {
          prop: "photo",
          label: "头像",
          width: 180,

        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "usertypeName",
          label: "类型",

        },
        {
          prop: "sex",
          label: "性别",
        },
        {
          prop: "cardid",
          label: "身份证号",

        },
        {
          prop: "mobile",
          label: "手机号",
        },
        {
          prop: "usernative",
          label: "籍贯",
        },
        {
          prop: "nation",
          label: "民族",
        },
        {
          prop: "building",
          label: "小区",
        },
        {
          prop: "options",
          label: "操作",
          slotname: "options",
        },

      ],
      form: {
        name: '',
        region: '',
      },
      query: {
        page: 1,
        psize: 10,
      },

      tableData: [],
      counts: 0,
      multipleSelection: []
    }
  },
  created() {
    this.getList()
  },

  methods: {
    async getList() {
      this.loading = true;
      try {
        let { data: { counts, list: listData } } = await list(this.query);
        this.counts = counts;
        this.tableData = listData;
        this.loading = false;
        console.log('获取到的数据:', listData);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },
    async handleDelete(row) {
      try {
        await this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await del({ id: row.id })
        await this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        if (error === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        } else {
          console.error('删除失败:', error)
        }
      }
    },
    handleClick(row) {
      console.log('编辑操作:', row)
      // 这里可以添加编辑逻辑
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.psize = val;
      this.query.page = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.page = val;
      this.getList();
    }
  },


}
</script>

<style lang="less" scoped>
@import url(../assets/css/userinfo.less);
</style>
